<template>
  <div class="about">
    <div class="head" >
        <div class="head clear" style="display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;">
      <div class="div" style="margin-right:60px;display:flex;align-items:center;" @click="$router.go(-1)">
          <img src="../../assets/image/返回白@2x.png" alt="" class="percen">
          <span class="sapn1" style="color:#fff;">返回</span>
      </div>
        <div class="div">
            <span class="sapn2" style="color:#fff;">康复服务评价</span>
        </div>
        <div class="div" style="margin-left:60px;display:flex;align-items:center;" @click="newperple()">
          <div v-show="isDoc">
          <img src="../../assets/image/新建@2x.png" alt="" class="percen" style="width: 15px;
  height: 15px;">
          <span class="sapn1" style="color:#fff;">新建</span>
          </div>
      </div>
    </div>
    </div>
    <div class="aa">
    <div class="main1" v-for="(item,k) in show" :key="k">
    <div class="main clear" @click="gotwo(k)">
        <div class="left">
          {{item.pingjianiandu}}
        </div>
        <div class="right">
          <p>残疾人康复服务满意程度：{{bijiao1[item.manyichengdu]}}</p>
          <span>服务效果：{{bijiao2[item.fuwuxiaoguo]}}</span>
          <img src="../../assets/image/更多灰@2x.png" alt="">
        </div>
    </div>

   </div>
    </div>
  </div>
</template>
<script>
import {EvaluationOrderBy} from '../../apiCanJi/apiCanji'

export default {
  data () {
    return {
      bijiao1: ['非常满意', '满意', '不满意'],
      bijiao2: ['优良', '一般', '较差'],
      show: [],
      newdata: '',
      myData: '',
      chos: '',
      isDoc: false

    }
  },
  methods: {
    newperple () {
      this.$router.push('assnext')
    },
    //  goone(k){
    //     this.$router.push('yearone?id='+this.show[k].id)
    //  },
    gotwo (k) {
      this.$router.push('yeartwo?id=' + this.show[k].id)
    },
    xiu () {
      var id = JSON.parse(localStorage.disid).id
      console.log(id)
      EvaluationOrderBy({dpid: id}).then(res => {
        console.log(res)
        this.show = res
      })
      var date = new Date()
      var YY = date.getFullYear()
      console.log(YY + '年度')
      this.chos = YY + '年度'
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
  },
  created () {
    this.xiu()
    document.title = '康复服务评价'
    var role = sessionStorage.role
    if (role === 1) {
      this.isDoc = false
    } else if (role > 1) {
      this.isDoc = true
    } else {
      this.isDoc = false
    }
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.head{
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
  position: fixed;
  top:0px;
  z-index:100;
}
.percen{
  width: 15px;
  height: 15px;
  margin: 0px 5px 0px 15px;

}
.head .percen{
    width: 7px;
  height: 13px;
}

.div {
  /* float: left; */
  font-size: 15px;
  font-weight: bold;

}

.main1{
  margin-bottom: 5px;
  /* border-bottom:1px solid #ccc ; */
  background-color: #fff;

}
.main{
  width: 100%;
  height: 75px;

  /* margin-bottom: 5px; */
  position: relative;
}
.aa{
  margin-top: 44px;
}
.left{
  width: 90px;
  height: 75px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  text-align: center;
  line-height: 75px;
  float: left;
}
.right{
  width: 255px;
  height: 35px;
  float: left;
  margin-top: 20px;
  padding-left: 10px;
  border-left: 1px solid #E5E5E5;
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;

}
.right p{
  margin: 0px;
}
.right img{
  width: 7px;
  height: 13px;
  position: absolute;
  right: 20px;
  top: 31px;
}
</style>
